<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link
	href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css"
	rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">
<!-- Stylesheets -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- Responsive File -->
<link href="css/responsive.css" rel="stylesheet">
<!-- Responsive Settings -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<script src="js/lib/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/lib/raphael-min.js"></script>
<script type="text/javascript" src="js/res/chinaMapConfig.js"></script>
<script type="text/javascript" src="js/map-min.js"></script>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet"
	href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
	integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu"
	crossorigin="anonymous">
<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet"
	href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css"
	integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ"
	crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script
	src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
	integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
	crossorigin="anonymous"></script>

<style type="text/css">
.glyphicon {
	margin-right: 5px;
}

.btn-wrapper {
	padding: 1em 0;
}

.thumbnail {
	margin-bottom: 20px;
	padding: 0px;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;
}

.item.list-group-item {
	float: none;
	width: 100%;
	background-color: #fff;
	margin-bottom: 10px;
}

.item.list-group-item:nth-of-type(odd):hover, .item.list-group-item:hover
	{
	background: #428bca;
}

.item.list-group-item .list-group-image {
	margin-right: 10px;
}

.item.list-group-item .thumbnail {
	margin-bottom: 0px;
}

.item.list-group-item .caption {
	padding: 9px 9px 0px 9px;
}

.item.list-group-item:nth-of-type(odd) {
	background: #eeeeee;
}

.item.list-group-item:before, .item.list-group-item:after {
	display: table;
	content: " ";
}

.item.list-group-item img {
	float: left;
}

.item.list-group-item:after {
	clear: both;
}

.list-group-item-text {
	margin: 0 0 11px;
}

* {
	padding: 0px;
	margin: 0px;
	border: 0px;
}

ul, ol {
	list-style: none;
}
/*.tm-footer{background: rgb(236, 144, 19);}*/
.mainbox {
	width: 100%;
	margin: 0 auto;
	background: #fff;
	margin-top: -12px;
	padding-bottom: 20px;
}

.mainbox .chose {
	margin: 12px auto;
	width: 1200px;
	padding-top: 20px;
}

.mainbox .chose .box {
	width: 100%;
	display: flex;
	align-items: center;
	margin-bottom: 15px;
}

.mainbox .chose .box span {
	width: 10%;
	color: #676767;
	font-size: 16px;
}

.mainbox .chose .box ul {
	display: flex;
	flex-wrap: wrap;
	width: 90%;
	margin: 0;
}

.mainbox .chose .box ul li {
	color: #161616;
	font-size: 14px;
	cursor: pointer;
	border: 1px solid #afafaf;
	padding: 7px 14px;
	border: 1px solid #afafaf;
	border-right: none;
}

.mainbox .chose .box ul li:nth-of-type(1) {
	margin-right: 10px;
	border-radius: 4px;
	border-right: 1px solid #afafaf;
}

.mainbox .chose .box ul li:nth-of-type(2) {
	border-radius: 4px 0 0 4px;
}

.mainbox .chose .box ul li:nth-last-of-type(1) {
	border-radius: 0 4px 4px 0;
	border-right: 1px solid #afafaf;
}

.mainbox .chose .box ul li:hover {
	background: #e0f7ed;
}

.mainbox .chose .box ul li.act {
	color: #11a560;
	border-color: #11a560;
	border-right: none;
	background-color: #e0f7ed;
	font-weight: 700;
}

.mainbox .chose .box ul li:nth-of-type(1).act {
	border-right: 1px solid #11a560;
}

.mainbox .chose .box ul li:nth-last-of-type(1).act {
	border-right: 1px solid #11a560;
}

.mainbox .chose .box ul li.act2 {
	border-left: 1px solid #11a560;
}

.mainbox .chose .box ul li:nth-of-type(2).act2 {
	border-left: 1px solid #afafaf;
}

.mainbox .chose .box .fanwei {
	display: flex;
	height: 100%;
	width: 21%;
	line-height: 36px;
	font-size: 22px;
}

.mainbox .chose .box .fanwei div {
	display: flex;
	width: 50%;
}

.mainbox .chose .box .fanwei input {
	font-size: 14px;
	width: 90%;
	height: 36px;
	line-height: 36px;
	border-radius: 4px 0 0 4px;
	border: 1px solid #afafaf;
	color: #161616;
	padding: 0 12px;
	outline: none;
	transition: border .2s ease-in;
}

.mainbox .chose .box .fanwei span {
	width: 34%;
	text-align: center;
	border: 1px solid #afafaf;
	background: #f0f0f0;
	font-size: 14px;
	color: #161616;
	border-left: none;
	border-radius: 0 4px 4px 0;
	line-height: 34px;
}

.mainbox .chose .box .ul2 {
	width: 44%;
}

.mainbox .chose .box .fanwei .left {
	display: flex;
	justify-content: flex-end;
	margin-right: 5px;
}

.mainbox .chose .box .fanwei .rig {
	display: flex;
	justify-content: flex-start;
	margin-left: 5px;
}

.mainbox .chose .box .time {
	width: 25%;
	display: flex;
	line-height: 36px;
	font-size: 16px;
	justify-content: flex-end;
}

.mainbox .chose .box .time div {
	width: 41%;
	border-radius: 4px;
	border: 1px solid #afafaf;
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

.mainbox .chose .box .time .left {
	margin-right: 5px;
}

.mainbox .chose .box .time .rig {
	margin-left: 5px;
}

.mainbox .chose .box .time input {
	font-size: 14px;
	width: 90%;
	height: 36px;
	line-height: 36px;
	margin-bottom: 0;
	color: #161616;
	border: none;
	padding: 0 10px;
	outline: none;
	transition: border .2s ease-in;
}

.mainbox .chose .box .time .fa {
	width: 30px;
	padding-left: 10px;
}

.mainbox .chose .box .time .fa-calendar:before {
	font-size: 17px;
}

.mainbox .chose .box .buttons {
	width: 43%;
	display: flex;
	align-content: center;
}

.mainbox .chose .box .buttons button {
	background: transparent;
	background-color: #11a560;
	font-weight: 600;
	border-radius: 10px;
	width: 6rem;
	height: 36px;
	line-height: 36px;
	padding: 0;
	margin: 0;
	font-size: 16px;
	margin-left: 50px;
}

.mainbox .table {
	margin: 12px auto;
	width: 1200px;
	padding-top: 20px;
}

.mainbox .table table {
	width: 100%;
	border: none;
	border-top: 1px solid #e5e5e5;
}

.mainbox .table table tr {
	border-bottom: 1px solid #e5e5e5;
}

.mainbox .table table th {
	text-align: center;
	font-size: 15px;
	font-weight: 700;
	border-bottom: 1px solid #e5e5e5;
	padding: 28px 0;
}

.mainbox .table table td {
	text-align: center;
	border-bottom: 1px solid #e5e5e5;
	padding: 28px 0;
}

.mainbox .table .jiedan {
	display: block;
	margin: 0 auto;
	border-radius: 5px;
	width: 76px;
	height: 28px;
	line-height: 28px;
	border: 1px solid #11a560 !important;
	background-color: #11a560 !important;
	color: #fff !important;
	font-size: 16px;
	font-weight: 600;
}

.mainbox .table td.cdr {
	width: 23%;
	text-align: left;
	padding: 0 2%;
	line-height: 24px;
}

.mainbox .table td.cdr .type {
	padding: 0;
	width: 24px;
	text-align: center;
	height: 24px;
	line-height: 24px;
	font-size: 14px;
	font-weight: 700;
	border-radius: 12px;
	cursor: default;
	display: inline-block;
}

.mainbox .table td.cdr .num {
	float: right;
	display: inline-block;
	margin-left: 8px;
	background-color: #ffe9cc;
	color: #ff9800;
	height: 24px;
	line-height: 24px;
	font-size: 14px;
	font-weight: 700;
	text-align: left;
	border-radius: 12px;
	padding: 0 8px;
}

.mainbox .table td.cdr .cdr1 {
	width: 100%;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

.mainbox .table td.cdr p {
	width: 100%;
	float: left;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	margin-bottom: 0;
	color: #222;
	font-size: 0.875rem;
}

.mainbox .table td.mf {
	position: relative;
}

.mainbox .table td.mf img {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 40%;
}

.mainbox .table td img {
	display: none;
}

.mainbox .table td.red {
	color: #e5342b;
}

.mainbox .table td.bao {
	position: relative;
}

.mainbox .table td.bao img {
	display: block;
	position: absolute;
	top: 27.1px;
	left: 24px;
	width: 18%;
}

.tm-footer {
	background: #f7f7f7;
}

.tm-footer, .tm-footer a {
	color: #000 !important;
}

.tm-footer h3 {
	color: #000;
	font-weight: 500;
}
}
</style>
</head>
<body>
	<header class="main-header header-style-one">

		<!--上导航-->
		<div class="header-upper">
			<div class="inner-container clearfix">
				<!--Logo-->
				<div class="logo-box">
					<div class="logo">
						<a href="index.jsp"
							title="Hotera - Hotel and Restaurant HTML Template"><img
							src="images/logo.png"
							style="width: 120px; height: 48px; margin-top: 10px"
							alt="Hotera - Hotel and Restaurant HTML Template"
							title="Hotera - Hotel and Restaurant HTML Template"></a>
					</div>
				</div>
				<div class="nav-outer clearfix">
					<!--Mobile Navigation Toggler-->
					<div class="mobile-nav-toggler">
						<span class="icon flaticon-menu-2"></span><span class="txt">Menu</span>
					</div>

					<!-- Main Menu -->
					<nav class="main-menu navbar-expand-md navbar-light">
						<div class="collapse navbar-collapse show clearfix"
							id="navbarSupportedContent">
							<ul class="navigation clearfix">
								<li class="current dropdown"><a href="index.jsp">首页</a></li>
								<li class="dropdown"><a href="room.jsp">住宿</a></li>
								<li class="dropdown"><a href="long.jsp">分类筛选</a></li>
								<li>
									<div style="width: 500px; height: 50px; position: relative; top: 10px;">
										<form action="sell.do" >
											<input class="form-control" id="inputSuccess1" name="rname"
												aria-describedby="helpBlock2" type="text"
												style="width: 350px; height: 50px;">
											<button type="submit" class="btn btn-primary"
												style="float: right; width: 130px; height: 50px; background: black; position: relative; top: -65px">查询</button>
										</form>
									</div>
								</li>
							</ul>
						</div>
					</nav>
				</div>

				<div class="other-links clearfix">
					<div class="info">
						<ul class="clearfix">
							<li><a href="login.jsp"><span
									class="icon flaticon-padlock"></span><span class="txt">Login</span></a></li>
							<li><a href="#"><span class="icon flaticon-smartphone-2"></span><span
									class="txt">+086 198 7307 744</span></a></li>
						</ul>
					</div>
					<div class="link-box">
						<a href="main.jsp" class="theme-btn btn-style-one"><span
							class="btn-title">个人中心</span></a>
					</div>
				</div>

			</div>
		</div>
		<!--End上导航-->
	</header>
	 <form action="selcon.do">
	<div class="mainbox" style="position: relative; top: 185px">
		<div class="chose">
			<div class="box">
				<span>多选多选</span>
				<ul class="ul1" id="leixin">
					<li class="act">全部</li>
					<li>多选</li>
					<li>多选</li>
					<li>多选</li>
					<li>多选多选</li>
				</ul>
			</div>
			<div class="box">
				<span>单选</span>
				<ul class="ul" id="status">
					<li class="act">全部</li>
					<li>单选</li>
					<li>单选</li>
				</ul>
			</div>

			<div class="box">
				<span>其他条件</span>

				<div class="fanwei">
					<div class="left">
						<input type="text" name="pricestart" id="minmoney" placeholder="最小金额" />
						
					</div>
					-
					<div class="rig">
						<input type="text" name="priceend" id="maxmoney" placeholder="最大金额" />
						
					</div>
				</div>

				<div class="time">
					<div class="left">
						<i class="fa fa-calendar"></i> <input type="text" value=""
							id="demo-1" placeholder="开始日期">
					</div>
					至
					<div class="rig">
						<i class="fa fa-calendar"></i> <input type="text" value=""
							id="demo-2" placeholder="结束日期">
					</div>
				</div>

				<div class="buttons">
				   
					   <button type="submit">查询</button>
					
				</div>
			</div>
		</div>
	</div>
	</form>
	<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
	<link rel="stylesheet"
		href="http://www.jq22.com/jquery/font-awesome.4.6.0.css">
	<link href="css/foundation.min.css" rel="stylesheet" type="text/css">
	<link href="css/foundation-datepicker.css" rel="stylesheet"
		type="text/css">
	<script src="js/foundation-datepicker.min.js"></script>
	<script src="js/locales/foundation-datepicker.zh-CN.js"></script>
	<script type="text/javascript">
		$(function() {
			$(".ul1 li").click(function() {
				if ($(this).hasClass("act")) {
					$(this).removeClass('act');
					$(this).siblings('li').next('li').removeClass('act2');
				} else {
					if ($(".ul1 li:first").hasClass("act")) {
						$(".ul1 li:first").removeClass('act');
						$(".ul1 li:first").next('li').removeClass('act2');
					}
					$(this).addClass('act');
					$(this).next('li').addClass('act2');
				}
			});
			$(".ul1 li:first").click(function() {
				if ($(this).hasClass("act")) {
					$(this).siblings('li').removeClass('act');
					$(this).siblings('li').next('li').removeClass('act2');
				} else {
					$(this).siblings('li').removeClass('act');
					$(this).siblings('li').next('li').removeClass('act2');
					$(this).addClass('act');
					$(this).next('li').addClass('act2');
				}
			});
			$(".ul li").click(function() {
				$(this).siblings('li').removeClass('act');
				$(this).siblings('li').next('li').removeClass('act2');
				$(this).addClass('act');
				$(this).next('li').addClass('act2');
			});

		});
		$('#demo-1').fdatepicker({
			format : 'yyyy-mm-dd',
		});
		$('#demo-2').fdatepicker({
			format : 'yyyy-mm-dd',

		});
	</script>



	<!-- 列表 -->
	<div
		style="width: 100% px; height: 645px; position: relative; top: 185px;">
		<%-- <c:forEach items="${list }" var="r"> --%>
		<table>
			<c:forEach items="${list }" var="r">
				<tr>
					<td>
						<div id="products" class="row list-group">
							<div class="item  list-group-item"
								style="width: 1400px; height: 200px;">
								<div class="thumbnail">
									<img class="group list-group-image"
										src="${r.picture }" alt=""
										style="width: 300px; height: 180px;" />
									<div class="caption" style="background: #ddd; height: 180px;">
										<h4 class="group inner list-group-item-heading">${r.rname }</h4>
										<p class="group inner list-group-item-text">淮宁河无定河，陕北最著名的一条河。</p>
										<div class="row"
											style="background: #ddd; width: 200px; height: 100px;">
											<div class="col-xs-12 col-md-6"
												style="position: relative; left: 25px; top: 40px;">
												<div class="rating">
													<span class="fa fa-star"></span> <span class="fa fa-star"></span>
													<span class="fa fa-star"></span> <span class="fa fa-star"></span>
													<span class="fa fa-star"></span>
												</div>
											</div>
											<div class="col-xs-12 col-md-6"
												style="position: relative; left: 185px; top: 20px;">
												<a href="#">
													<div style="position: relative; left: -30px; top: 20px;">
														<div class="price">
															<span class="unit">¥</span> <span class="num">${r.price }</span>
															<span class="text">起</span> <span class="text">/份</span>
														</div>
													</div>
												</a>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</td>
				</tr>
			</c:forEach>
		</table>
	</div>
	<!-- 列表 -->

	<script src="js/script.js"></script>
	
</body>
</html>